<template>
  <div id="app">
    <div class="app-container">
      <div class="content1">
        <div class="card" style="float: left">
          <div class="img"><img src="../../assets/imgs/Word.png" style="width: 83px; height: 83px; border-radius: 50%;"></div>
          <h1>PDF转Word</h1>
          <p><el-button type="success" size="mini" @click="dialogVisible=true">GO</el-button></p>
        </div>

        <div class="card" style="float: left">
          <div class="img"><img src="../../assets/imgs/HTML5.png" style="width: 83px; height: 83px; border-radius: 50%;"></div>
          <h1>PDF转HTML</h1>
          <p><el-button type="success" size="mini" @click="dialogVisible1=true">GO</el-button></p>
        </div>

        <el-dialog
          :visible.sync="dialogVisible"
          title="欢迎使用PDF转Word"
          width="30%">
            <el-form>
              <el-form-item label="请选择PDF文件">
                <el-upload
                  :auto-upload="true"
                  :multiple="false"
                  :limit="1"
                  :on-exceed="fileUploadExceed"
                  :on-success="fileUploadSuccess"
                  :on-error="fileUploadError"
                  :action="importUrl"
                  name="PDFFile"
                  accept=".pdf">
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible=false">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog
          :visible.sync="dialogVisible1"
          title="欢迎使用PDF转HTML"
          width="30%">
          <el-form>
            <el-form-item label="请选择PDF文件">
              <el-upload
                :auto-upload="true"
                :multiple="false"
                :limit="1"
                :on-exceed="fileUploadExceed"
                :on-success="fileUploadSuccess"
                :on-error="fileUploadError"
                :action="importUrl1"
                name="PDFFile"
                accept=".pdf">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1=false">取消</el-button>
          </div>
        </el-dialog>

      </div>
    </div>
  </div>
</template>

<script>
import {getPdf2Word, getPdf2Html} from '@/api/pdf'

export default {
  name: 'PDF',
  data() {
    return {
      dialogVisible: false,
      dialogVisible1: false,
      importUrl: '',
      importUrl1: '',
      fileName: ''
    }
  },
  methods: {
    fileUploadExceed () {
      this.$message.warning('只能读取一个文件')
    },
    fileUploadSuccess (response) {
      if (response.code === 20000) {
        if (response.data.suffix === 0) {
          this.dialogVisible =  false
        } else if (response.data.suffix === 1) {
          this.dialogVisible1 =  false
        }
        this.fileName = response.data.fileName
        this.$message.success('数据转换成功！')
        this.handleDownload(this.fileName, response.data.suffix)
      }
    },
    fileUploadError () {
      this.$message.error('数据导入失败')
    },
    handleDownload(fileName, suffix) {
      if (suffix === 0) {
        getPdf2Word(fileName).then(res => {
          this.exportFile(res, fileName, 'doc')
        })
      } else if (suffix === 1) {
        getPdf2Html(fileName).then(res => {
          this.exportFile(res, fileName, 'html')
        })
      }
    },
    exportFile(res, fileName, type) {
      const blob = new Blob([res.data])
      const link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = fileName + '.' + type // 设置下载文件名
      link.click()
      URL.revokeObjectURL(link.href)
      document.body.removeChild(link)
    }
  },
  created () {
    if (process.env.NODE_ENV === "development") {
      this.importUrl = process.env.BASE_API + "/pdf/pdf2word"
      this.importUrl1 = process.env.BASE_API + "/pdf/pdf2html"
    } else {
      this.importUrl = "http://49.234.149:80/pdf/pdf2word"
      this.importUrl1 = "http://49.234.149:80/pdf/pdf2html"
    }
  }
}
</script>

<style scoped>
  .card {
    width: 190px;
    height: 240px;
    background: #302173;
    border-radius: 16px;
    text-align: center;
    color: #f0f0f0;
    font-family: inherit;
    z-index: 1;
    margin-right: 16px;
  }
  .img {
    display: flex;
    margin: 60px auto 10px auto;
    width: 85px;
    height: 85px;
    border: 1px solid #f0f0f0;
    border-radius: 50%;
    font-size: 11px;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    z-index: 99;
  }
  p{
    opacity: 0;
    transition: all 0.5s;
  }
  h1{
    padding: 10px;
    font-weight: 500;
    font-size: 18px;
    color: white;
  }
  .card:hover .img {
    transform: scale(1.1);
    border: 1px solid #f0f0f0;
  }
  .card:hover h1,
  .card:hover p {
    opacity: 1;
  }
</style>
